<template>
  <view class="search-page">
    <view class="search-header">
      <view class="search-input">
        <uni-search-bar
          clearButton="auto"
          :radius="100"
          v-model="searchValue"
          cancelButton="none"
          @confirm="search"
          @focus="inputClick"
          class="search"
          height="10px"
        ></uni-search-bar>
      </view>
      <view @click="search" class="search-button">搜索</view>
    </view>
    <div class="sort-item-content">
      <div
        class="content-item"
        v-for="(goods, index) in showData"
        :key="index"
        @click="showBookDetail(goods)"
      >
        <div class="img-wrapper">
          <img class="img" :src="goods.item_img[0]" />
        </div>
        <div class="content-wrapper">
          <div class="title">{{ goods.title }}</div>
          <div class="cart-bottom">
            <div class="cart-money">
              <div class="money">
                <text class="iconfont icon-jiage"></text>{{ goods.price }}
              </div>
              <div class="cart">
                <button @click.stop="cartTo(goods)" plain="true">
                  加入购物车
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title" v-if="show">没有“{{ searchValue }}”相关商品</div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false, //是否有商品
      searchValue: "",
      openid: "",
      showData: [],
    };
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "openid",
      success: function (res) {
        that.openid = res.data;
      },
    });
  },
  methods: {
    search() {
      // console.log("444");
      this.show = false;
      console.log(this.searchValue);
      uni.showLoading({
        title: "搜索中",
      });
      this.$MyRequest({
        url: "/cart_search",
        method: "POST",
        data: {
          value: this.searchValue,
        },
      }).then((res) => {
        console.log(res.data);
        uni.hideLoading();
        // this.showData = res.data.data;
        this.showData = res.data.data.map((s) => {
          s.item_img = JSON.parse(s.item_img);
          return s;
        });
        if (this.showData.length <= 0) {
          this.show = true;
        }
      });
    },
    inputClick() {
      this.show = false;
    },
    showBookDetail(item) {
      // console.log("56556");
      // console.log(item.author);
      uni.navigateTo({
        url: "/pages/home/service/GroupBuying/GoodsDetail?s_id=" + item.s_id,
      });
    },
    //加入购物车
    cartTo(item) {
      console.log(item);
      this.$MyRequest({
        url: "/set_cart_one",
        method: "POST",
        data: {
          sId: item.s_id,
          openid: this.openid,
          img: item.item_img[0],
        },
      }).then((res) => {
        console.log(res.data);
        uni.showToast({
          title: "添加成功",
          duration: 1000,
        });
        // this.cartNum();
      });

      // uni.showLoading({
      //   title: "加载中",
      // });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.search-page {
  width: 100%;
  .search-header {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    // height: 25rpx;
    .search-input {
      flex: 1;
      padding-left: 5px;
      box-sizing: border-box;
      // height: 250rpx;
      // @include center;
    }
    .search-button {
      width: 10%;
      padding-right: 5px;
      font-size: 30rpx;
      color: #c23f3f;
      @include center;
    }
  }
  .sort-item-content {
    padding: 0 15rpx;
    // margin-top: 180rpx;
    margin-bottom: 90rpx;
    // height: 100%;
    width: 100%;
    // padding-right: 50rpx;
    box-sizing: border-box;
    // margin-bottom: 30rpx;
    .content-item {
      display: flex;
      margin-bottom: 30rpx;
      border-bottom: 1rpx solid rgba(223, 222, 222, 0.746);
      // padding-bottom: 10px;
      .img-wrapper {
        // padding: 20rpx 20rpx 20rpx 0;
        box-sizing: border-box;
        flex: 0 0 40%;
        // width: 250rpx;
        // height: 270rpx;
        .img {
          width: 100%;
          height: 270rpx;
        }
      }
      .content-wrapper {
        width: 100%;
        height: 290rpx;
        padding: 5rpx 0;
        padding-left: 18rpx;
        box-sizing: border-box;
        position: relative;
        // border-bottom: 1rpx solid rgba(223, 222, 222, 0.746);
        padding-bottom: 10px;
        // padding-right: 15rpx;
        // right: 15rpx;
        .title {
          font-size: 30rpx;
          letter-spacing: 1px;
          color: black;
        }
        .author {
          margin-top: 20rpx;
        }
        .cart-bottom {
          position: absolute;
          bottom: 20px;
          z-index: 800;
          .cart-money {
            display: flex;
            width: 100%;
            justify-content: space-between;
            box-sizing: border-box;

            // position: relative;
            .money {
              color: $uni-color-cart;
              font-size: 35rpx;
              font-weight: bold;
              // @include center;
            }
            .cart {
              // padding-left: 50rpx;
              position: absolute;
              left: 210rpx;
              bottom: 0;
              box-sizing: border-box;
              button {
                border-radius: 30rpx;
                font-size: 27rpx;
                color: #eee;
                width: 200rpx;
                letter-spacing: 1px;
                // size: 10;
                height: 55rpx;
                @include center;
                background-color: $uni-color-cart;
                border: none;
              }
            }
          }
        }
      }
    }
  }
  .title {
    @include center;
    color: #999;
    // margin-top: 20rpx;
  }
}
</style>
